import React, { useRef, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import { CameraOutline } from 'antd-mobile-icons'
import { Down } from '@react-vant/icons';



export default function Px() {
  const navigate = useNavigate();
  const cameraVideoRef = useRef(null);
  const cameraCanvasRef = useRef(null);
  const [lmg, setlmg] = useState("");
  

  useEffect(() => {
    openMedia(); //打打开摄像头
    return () => {
      console.log("组件卸载");
    }; // 组件��载时关闭��像头
  }, []);
  const errorFunc = (err) => {
    console.log(`${err.name} ${err.messagel}`);
    // always check  for errors at the end
   
  };
  const successFunc = (mediaStream) => {
    const video = cameraVideoRef.current;
    if ("srcObject" in video) {
      video.srcObject = mediaStream;
    }
    video.onloadedmetadata = () => {
      video.play();
    };
  };
  const openMedia = () => {
    const opt = { audio: false, video: { width: 200, height: 200 } };
    navigator.mediaDevices.getUserMedia(opt).then(successFunc).catch(errorFunc);
 
};
  const closeMedia = () => {
    const video = cameraVideoRef.current;
    const stream = video.srcObject;
    if ("getTracks" in stream) {
      const tracks = stream.getTracks();
      tracks.forEach((track) => {
        track.stop();
      });
    }
  };
  const getImg = () => {
    const video = cameraVideoRef.current;
    const canvas = cameraCanvasRef.current;
    if (canvas == null) {
      return;
    }
    const ctx = canvas.getContext("2d");
    console.log(ctx);
    ctx.drawImage(video, 10, 0, 300, 150);
    const Imgstr = canvas.toDataURL();
    const base64Img = Imgstr.split(";base64,").pop();
    const imgDate = { base64Img };
    closeMedia();
    return imgDate;
  };
  const saveImg = () => {
    const data = getImg();
    setlmg("data:image/png;base64," + data.base64Img);
    axios
      .put("/linmr/setphoto", {
        id: localStorage.getItem("userId"),
        photo: "data:image/png;base64," + data.base64Img,
      })
      .then((res) => {
        navigate("/ziliao");
      });
  };
  return (
    <div>
      <button style={{border:"0px",fontSize:"30px",backgroundColor:"white",marginLeft:"10px"}}
        onClick={() => {
          closeMedia();
        }}
      >
        x
      </button>
      <video
        id="cameraVideo"
        ref={cameraVideoRef}
        style={{ width: "100vw", height: "90%",  overflow: "hidden" }}
      ></video>

      <canvas id="cameraCanvas" ref={cameraCanvasRef} style={{ width: "100%", height: "100%" }}></canvas>

      <div>
        <button style={{border:"0px",fontSize:"30px",backgroundColor:"white"}}
          onClick={() => {
            saveImg();
            closeMedia();
          }}
        >
          <Down  />
          
        </button>
        <button style={{border:"0px",fontSize:"30px",backgroundColor:"white"}}
          onClick={() => {
            openMedia();
          }}
        >
          <CameraOutline />
        </button>
      </div>
    </div>
  );
}
